<template>
  <el-row type="flex" class="row-bg" justify="space-around" style="padding-top: 10px">
    <el-col :span="10">
      <div style="margin-top: 10px">
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="10">
            <dv-decoration-9  v-if="oneClassYoY>0"  style="width:150px;height:150px;" :color="['rgba(205,45,25,0.6)','rgba(205,14,25,0.6)']">
                    <span class="digit-blue">
                      <div slot="content" class="digit-red" style="font-size: 18px">
                        同比
                      </div>
                      <div class="digit-red">
                        <span>+</span>
                          {{ oneClassYoY }}
                        <span>%</span>
                      </div>
                    </span>
            </dv-decoration-9>
            <dv-decoration-9  v-else style="width:150px;height:150px;" :color="['rgba(25,212,174,0.7)','rgba(69,169,208,0.5)']">
                    <span class="digit-blue">
                      <div slot="content" style="font-size: 18px">
                        日用电量
                      </div>
                      <div>
                        171443.36
<!--                          {{ oneClassYoY }}%-->
                      </div>
                    </span>
            </dv-decoration-9>
          </el-col>
          <el-col :span="10">
            <dv-decoration-9  v-if="oneClassMoM>0"  style="width:150px;height:150px;" :color="['rgba(205,45,25,0.6)','rgba(205,14,25,0.6)']">
                    <span class="digit-blue">
                      <div slot="content" class="digit-red" style="font-size: 18px">
                        环比
                      </div>
                      <div class="digit-red">
                        <span>+</span>
                          {{ oneClassMoM }}
                        <span>%</span>
                      </div>
                    </span>
            </dv-decoration-9>
            <dv-decoration-9  v-else style="width:150px;height:150px;">
                    <span class="digit-blue">
                      <div slot="content" style="font-size: 18px">
                        月用电量
                      </div>
                      <div>
                        9585332.23
<!--                          {{ oneClassMoM }}%-->
                      </div>
                    </span>
            </dv-decoration-9>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="10">
<!--      <div class="smallTitle">-->
<!--        <dv-decoration-11 style="width:100%;height:50px" :color="['rgb(4,57,113)','rgba(69,169,208,0.4)']">-->
<!--          二级告警-->
<!--        </dv-decoration-11>-->
<!--      </div>-->
      <div style="margin-top: 10px">
        <el-row type="flex" class="row-bg" justify="space-around" style="height: 50px">
          <el-col :span="10">
            <dv-decoration-9  v-if="twoClassYoY>0"  style="width:150px;height:150px;" :color="['rgba(205,45,25,0.6)','rgba(205,14,25,0.6)']">
                    <span class="digit-blue">
                      <div slot="content" class="digit-red" style="font-size: 18px">
                        同比
                      </div>
                      <div class="digit-red">
                        <span>+</span>
                          {{ twoClassYoY }}
                        <span>%</span>
                      </div>
                    </span>
            </dv-decoration-9>
            <dv-decoration-9  v-else style="width:150px;height:150px;" >
                    <span class="digit-blue">
                      <div slot="content" style="font-size: 18px">
                        选矿同比
                      </div>
                      <div>
                        +5%
<!--                          {{ twoClassYoY }}%-->
                      </div>
                    </span>
            </dv-decoration-9>
          </el-col>
          <el-col :span="10">
            <dv-decoration-9  v-if="twoClassMoM>0"  style="width:150px;height:150px;" :color="['rgb(205,9,25)','rgba(74,14,79,0.6)']">
                    <span class="digit-blue">
                      <div slot="content" class="digit-red" style="font-size: 18px">
                        选矿环比
                      </div>
                      <div class="digit-red">
                        <span>+</span>
                          {{ twoClassMoM }}
                        <span>%</span>
                      </div>
                    </span>
            </dv-decoration-9>
            <dv-decoration-9  v-else style="width:150px;height:150px;" :color="['rgba(25,212,174,0.7)','rgba(69,169,208,0.5)']" >
                    <span class="digit-blue">
                      <div slot="content" style="font-size: 18px">
                        选矿环比
                      </div>
                      <div>
                        +12%
<!--                          {{ twoClassMoM }}%-->
                      </div>
                    </span>
            </dv-decoration-9>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
// import request from '../../../network/request'
export default {
  name: 'alarmContrast',
  data () {
    return {
      timeer: null,
      oneClassMoM: 0, // 环比
      oneClassYoY: 0, // 同比
      twoClassMoM: 0,
      twoClassYoY: 0
    }
  },
  created () {
    this.getData()
  },
  mounted () {
    this.timer = setInterval(() => {
      this.getData()
    }, 5000
    )
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    getData () {
      // request({
      //   method: 'GET',
      //   url: '/dataOp/getCompareAlarmCount'
      // }).then(res => {
      //   // console.log(res.data)// 请求的返回体
      //   this.oneClassMoM = res.data.data.allCount.oneClassMoM.toFixed(2)
      //   this.oneClassYoY = res.data.data.allCount.oneClassYoY.toFixed(2)
      //   this.twoClassMoM = res.data.data.allCount.twoClassMoM.toFixed(2)
      //   this.twoClassYoY = res.data.data.allCount.twoClassYoY.toFixed(2)
      // }).catch((error) => {
      //   console.log(error)// 异常
      // })
    }
  }
}
</script>

<style scoped>
  .smallTitle{
    font-size: 20px;
    text-align: center;
  }
  .digit-blue {
    color: rgba(87, 244, 249, 0.8);
    font-size: 16px;
    text-align: center;
    vertical-align: center;
  }
  .digit-red {
    color: red;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    vertical-align: center;
  }
  .digit-blue:hover:after {
    position: absolute;
    left: 15px;
    top: 5px;
    padding: 5px;
    background-color: #0095ff;
    border-radius: 5px;
    color: #fff;
    /*这里显示的内容为title属性对应的值*/
    content: attr(title);
    z-index: 2;
    width: 120px;
  }
</style>
